iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
0
Mobile Development

[初探] 用 SwiftUI - 打造一個自助洗衣應用系列 第 6

第六日、用SwiftUI 打造自助洗衣應用-圖示與icon工具篇

  • 分享至 

  • xImage
  •  

今天是周日,也是6/30天。
所以就輕鬆一點介紹吧。

今天的兩個工具為之前提到過的SF SymbolsApp Icon Generator

Icon 工具

1. App Icon Maker
2. App Icon Generator
以上兩者皆為Icon切圖工具

方法的話從以下步驟進行,誰都可以學會:

  1. 遵守上一篇的規範,畫一張正方型的圖
  2. 連結到網址,並根據自己的需求把東西下載下來
  3. 從Xcode開啟你的專案,從左邊欄位找到資料夾圖案的 Assets.xcassets 點下去
  4. 從ZIP(下載的檔案)中找到 AppIcon.appiconset (icon的位置)
  5. 將 Assets.xcassets 裡的 AppIcon 刪除
  6. 將 AppIcon.appiconset 複製起來貼到 Assets.xcassets 裡
  7. 完成

圖示 工具

這邊的話當然就介紹一個對只會寫程式的開發員利器 SF Symbols

https://ithelp.ithome.com.tw/upload/images/20200906/20130099MnP6Z3R2Ah.png

這個工具能讓你使用系統內建的圖示,讓你不用因為設計圖示而與設計師打架吵架
裡面提供了超過2400種圖示,提供使用與變更(包括大小與顏色都能進行簡單的修改)

那怎麼在Xcode裡面使用呢?
我們只需要去呼叫它的名字就可以了

在SwiftUI裡面
我們如果要去增加一張圖片就要打:

Image(systemName: "heart.fill")

如果要去變更大小(.small/.medium/.large)就可以使用:

.imageScale(.large)
https://ithelp.ithome.com.tw/upload/images/20200906/20130099bpNpNUj7Aw.png
(上為apple教學示意圖)

接下來,就是對Swiftui簡單的解說與使用


上一篇
第五日、用SwiftUI 打造自助洗衣應用-圖示與icon篇
下一篇
第七日、SwiftUI - 簡單介紹 篇
系列文
[初探] 用 SwiftUI - 打造一個自助洗衣應用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言